<template>
  <div class="contanier">
    <!-- <div class="contanier-title">考试管理</div> -->
    <search-form>
      <template v-slot:formLeft>
        <el-form :inline="true" :model="userFormLine" class="demo-form-inline">
          <el-row>
            <el-col :span="8">
              <div class="grid-content bg-purple">
                <el-form-item label="考试名称" label-width="80px">
                  <el-input
                    v-model="userFormLine.fullName"
                    placeholder="请输入考试名称"
                    clearable
                  ></el-input>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content bg-purple-light">
                <el-form-item label="考试状态" label-width="80px">
                  <el-select
                    v-model="userFormLine.timeMark"
                    placeholder="请选择"
                    label-width="80px"
                    clearable
                  >
                    <el-option
                      v-for="item in statusList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content bg-purple-light">
                <el-form-item label="参与状态" label-width="80px">
                  <el-select
                    v-model="userFormLine.enabledMark"
                    placeholder="请选择"
                    label-width="80px"
                    clearable
                  >
                    <el-option
                      v-for="item in cyList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </div>
            </el-col>
            <!-- <el-col :span="8">
              <div class="grid-content bg-purple-light">
                <el-form-item label="考试类型" label-width="80px">
                  <el-select v-model="userFormLine.categoryId" placeholder="请选择">
                      <el-option label="理论考试" value="1"></el-option>
                      <el-option label="技能考试" value="2"></el-option>
                      <el-option label="自测" value="3"></el-option>
                      <el-option label="仅考试" value="4"></el-option>
                    </el-select>
                </el-form-item>
              </div>
            </el-col> -->
          </el-row>
        </el-form>
      </template>
      <template v-slot:formRight>
        <div class="formRight-btn">
          <el-button icon="el-icon-refresh" @click="onReset" class="overPosBtn">重 置</el-button>
          <el-button
            type="primary"
            @click="onSubmit"
            icon="el-icon-search"
            class="set-col-btn"
            >查 询</el-button
          >
        </div>
      </template>
    </search-form>
    <div>
      <search-table>
        <!-- <template v-slot:daochu>
                    <div class="set-table-right">
                        <el-button icon="el-icon-my-add
                        ">新增试卷</el-button>
                        <el-button icon="el-icon-my-message">导 出</el-button>
                    </div>
                </template> -->
        <template v-slot:biaoge>
          <template>
            <el-table
              ref="multipleTable"
              :data="tableData"
              tooltip-effect="dark"
              style="width: 100%"
              @selection-change="handleSelectionChange"
              class="table-top"
              :header-cell-style="{
                backgroundColor: '#f5f7fa',
                color: '#606266',
              }"
            >
              <el-table-column type="index" width="55" label="序号">
              </el-table-column>
              <el-table-column label="考试名称" width="260">
                <template slot-scope="scope">{{ scope.row.fullName }}</template>
              </el-table-column>
              <!-- <el-table-column prop="examPaperId" label="专题名称">
              </el-table-column> -->
              <el-table-column prop="categoryId" label="考试类型" width="180">
                <template slot-scope="scope">
                  <div>仅考试</div>
                  <!-- <div v-if="scope.row.categoryId == 1">理论考试</div>
                  <div v-if="scope.row.categoryId == 2">技能考试</div>
                  <div v-if="scope.row.categoryId == 3">自测</div>
                  <div v-if="scope.row.categoryId == 4">仅考试</div> -->
                </template>
              </el-table-column>
              <el-table-column prop="timeMark" label="参与状态" width="180">
                <template slot-scope="scope">
                  <!-- 空-全部，0-未通过、1-已通过、3-未参与 -->
                  <div v-if="scope.row.examTask && scope.row.examTask.enabledMark == 0">未通过</div>
                  <div v-if="scope.row.examTask && scope.row.examTask.enabledMark == 1">已通过</div>
                  <div v-if="scope.row.examTask && scope.row.examTask.enabledMark == 3">未参与</div>
                </template>
              </el-table-column>
              <el-table-column prop="fs" label="分数" width="180">
                <template slot-scope="scope">
                  {{ scope.row.examTask && scope.row.examTask.myScore }}
                </template>
              </el-table-column>
              <el-table-column prop="examStatus" label="考试状态"> 
              </el-table-column>
              <el-table-column fixed="right" label="操作" width="250">
                <template slot-scope="scope">
                  <el-button
                    @click.native.prevent="handleSignUp(scope.$index, tableData)"
                    type="text"
                    :class="['set-table-btn', 'set-table-btn-col', scope.row.examStatus == '进行中' ? '' : 'disabled']"
                    icon="el-icon-my-message"
                    size="small"
                    :disabled="scope.row.examStatus != '进行中'"
                  >
                    报名考试
                  </el-button>
                  <el-button
                    @click.native.prevent="detail(scope, tableData)"
                    type="text"
                    class="set-table-btn set-table-btn-col"
                    icon="el-icon-document"
                    size="small"
                  >
                    详情
                  </el-button>
                  <!-- <el-button
                    @click.native.prevent="deleteRow(scope.$index, tableData)"
                    type="text"
                    class="set-table-btn set-table-btn-col"
                    icon="el-icon-my-add"
                    size="small"
                  >
                    证书导出
                  </el-button> -->
                </template>
              </el-table-column>
            </el-table>
          </template>
        </template>
        <template v-slot:fenye>
          <div class="set-table-pg-right">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
            >
            </el-pagination>
          </div>
        </template>
      </search-table>
    </div>
    <el-dialog
      title="详情"
      :visible.sync="showDetail"
    >
      <div class="content">
        <div class="header">{{ tableData2.fullName }}</div>
        <div class="table">
          <el-table
            ref="multipleTable"
            :data="tableData2.examTaskList"
            tooltip-effect="dark"
            @selection-change="handleSelectionChange"
            class="table-top"
            :header-cell-style="{
              backgroundColor: '#f5f7fa',
              color: '#606266',
            }"
          >
            <el-table-column
              type="index"
              label="序号"
              width="80"
              align="center"
            >
            </el-table-column>
            <el-table-column label="考试时间" width="180">
              <template slot-scope="scope">{{ scope.row.startTime }}</template>
            </el-table-column>
            <el-table-column prop="jjsj" label="交卷时间" width="180">
              <template slot-scope="scope">{{ scope.row.submitTime }}</template>
            </el-table-column>
            <el-table-column prop="ksys" label="考试用时" align="center">
              <template slot-scope="scope">
                {{ getExamTime(scope.row) }}
              </template>
            </el-table-column>
            <el-table-column prop="fs" label="分数">
              <template slot-scope="scope">
                <div v-if="scope.row.myScore < 80" style="color: red">
                  {{ scope.row.myScore }}
                </div>
                <div v-else style="color: #536387">{{ scope.row.myScore }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="result" label="结果">
              <template slot-scope="scope">
                <div v-if="scope.row.enabledMark == 1" class="pass">合格</div>
                <div v-if="scope.row.enabledMark == 0" class="nopass">不合格</div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          @click="showDetail = false"
          style="background: #2265ee"
          >确定</el-button
        >
      </span>
    </el-dialog>
    <el-dialog
      title="注意事项"
      :visible.sync="showDetail2"  width="545px"
    >
      <div class="content2">
        <div class="text">
          <div>1、最终成绩取第一次过及格线的分数，复考不更新成绩</div>
          <div>2、考试中途退出需重新考。</div>
          <div>确认知晓以上信息后,点击“开始”进入正式考试!</div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showDetail2 = false">关闭</el-button>
        <el-button
          type="primary"
          @click="startExam"
          style="background: #2265ee"
          :disabled="disabledButton"
          >{{ statusText}}</el-button
        >
      </span>
    </el-dialog>    
  </div>
</template>
<script>
import SearchForm from "@/components/search-form";
import SearchTable from "@/components/search-table";
import { myExamList,getExamTaskDetail, updateByBaoMingId } from "@/api/exam";
export default {
  name: "UserManagement",
  components: {
    SearchForm,
    SearchTable,
  },
  data() {
    return {
      showDetail: false,
      showDetail2: false,
      disabledButton: true,
      statusText: "开始（5s）",
      userFormLine: {
        fullName: "",
        categoryId: 4,
        timeMark: 0,   // 考试状态
        enabledMark: '',  // 参与状态
      },
      statusList: [
        {
          label: "全部",
          value: 0,
        },
        {
          label: "未开始",
          value: 10,
        },
        {
          label: "进行中",
          value: 20,
        },
        {
          label: "已结束",
          value: 30,
        },
      ],
      cyList: [
        {
          label: "全部",
          value: '',
        },
        {
          label: "未通过",
          value: 0,
        },
        {
          label: "已通过",
          value: 1,
        },
        {
          label: "未参与",
          value: 3,
        },
      ],
      tableData: [],
      tableData2: [],
      multipleSelection: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      examId: '',
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getExamTime(row) {
      const seconds = (new Date(row.submitTime).getTime() - new Date(row.startTime).getTime()) / 1000;
      if (seconds < 60) {
        return parseInt(seconds) + '秒';
      }
      return (seconds / 60).toFixed(1) + '分钟'
    },
    detail(index, data) {
      this.showDetail = true;
      // this.tableData2 = data.examTask;
      getExamTaskDetail(index.row.id).then((res) => {
        console.log(res);
        if(res.code === 200){
          this.tableData2 = res.data;
        }
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getList();
    },
    handleSignUp(index, data) {
      this.examId = data[index].id;
      this.showDetail2 = true;
      let i = 5 
      let timer = setInterval(() => {
        i--;
        this.statusText = `开始(${i}s)`;
          if(i === 0) {
            this.statusText = "开始";
            this.disabledButton = false;
            clearInterval(timer);
        }
      }, 1000);
    },
    getList() {
      myExamList({
        categoryId: 4,
        enabledMark: '',
        currentPage: this.currentPage,
        pageSize: this.pageSize,
        ...this.userFormLine,
      }).then((res) => {
        if(res.code === 200){
          this.tableData = res.data.list;
          this.total = res.data.pagination.total;
          this.tableData.forEach(item => {
            // 修改
            if ((item.startDatetime == '' && item.endDatetime == '') || (item.startDatetime == null && item.endDatetime == null)) {
              item.examStatus = '进行中';
            }
            else {
              item.examStatus = this.getEventStatus(item.startDatetime, item.endDatetime);
            }
          })
        }
      });
    },
    getEventStatus(startDatetime, endDatetime) {
      let startTime = new Date(startDatetime).getTime();
      let endTime = new Date(endDatetime).getTime();
      let currentTime = new Date().getTime();
      if (currentTime < startTime) {
        return '未开始';
      } else if (currentTime >= startTime && currentTime <= endTime) {
        return '进行中';
      } else {
        return '已结束';
      }
    },
    startExam(){
      let id = this.examId;
      updateByBaoMingId(id).then((res) => {});
      setTimeout(() => {
        this.showDetail2 = false;
        this.$router.push({
          path: '/zice/index',
          query: { id:  this.examId, type: 1 }
        });
      },800)
    },
    onSubmit(){
      this.getList();
    },
    onReset(){
      this.userFormLine = {};
      this.getList();
    }
  },
};
</script>
<style scoped lang="scss">
.pass {
  width: 44px;
  height: 20px;
  background: rgba(34, 101, 238, 0.06);
  border-radius: 2px;
  border: 1px solid #588fff;
  display: flex;
  font-size: 12px;
  color: #2265ee;
  line-height: 20px;
  text-align: right;
  font-style: normal;
  justify-content: center;
  align-items: center;
}

.nopass {
  width: 44px;
  height: 20px;
  background: rgba(217, 21, 21, 0.06);
  border-radius: 2px;
  border: 1px solid #d91515;
  display: flex;

  justify-content: center;
  font-size: 12px;
  color: #d91515;
  line-height: 20px;
  text-align: right;
  font-style: normal;
  align-items: center;
}

::v-deep .el-icon-my-message {
  background: url("../../assets/images/bm.png") no-repeat;
  width: 20px;
  height: 20px;
  transform: translateY(4px) translatex(2px);
}

::v-deep .el-icon-my-message:before {
  content: "替";
  font-size: 20px;
  visibility: hidden;
}

::v-deep .el-icon-my-message {
  font-size: 18px;
}

::v-deep .el-icon-my-message:before {
  content: "\e611";
}

::v-deep .el-icon-my-add {
  background: url("../../assets/images/zsdc.png") no-repeat;
  width: 20px;
  height: 20px;
  transform: translateY(4px) translatex(2px);
}

::v-deep .el-icon-my-add:before {
  content: "替";
  font-size: 20px;
  visibility: hidden;
}

::v-deep .el-icon-my-add {
  font-size: 18px;
}

::v-deep .el-icon-my-add:before {
  content: "\e611";
}

.content2 {
  display: flex;
  flex-direction: column;
  justify-content: center;

  font-size: 16px;
  color: #323232;
  line-height: 24px;
  align-items: center;
  font-style: normal;

  .text {
    text-align: left;
  }
}

.content {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;

  .header {
    font-size: 20px;
    color: #323232;
    line-height: 30px;
    text-align: right;
    font-style: normal;
  }
  .table{
    width: 100%;
    height: 100%;
    overflow-y: auto;
  }
}
.set-table-btn-col.disabled {
  color: #999 !important;
}

.set-table-btn-col.disabled i.el-icon-my-message {
  filter: grayscale(100%) !important;
}

.set-table-btn-col.disabled {
  color: #999 !important;
}

.set-table-btn-col.disabled img {
  filter: grayscale(100%) !important;
}

</style>